<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
<canvas id="myCanvas" width="400" height="260" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

/*
基本线条
上面的例子中展示了绘制矩形是多么简单。
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla()（ 若浏览器支持，如Opera 10 和 Firefox 3)。
通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
可以使用 lineWidth 属性改变线条粗细。
*/
context.fillStyle   = '#00f'; // blue  
context.strokeStyle = '#f00'; // red  
context.lineWidth   = 4; 
   
// Draw some rectangles.  
context.fillRect  (0,   0, 150, 50);  
context.strokeRect(0,  60, 150, 50);  
context.clearRect (30, 25,  90, 60);  
context.strokeRect(30, 25,  90, 60);  

/*
通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。
*/
// Set the style properties.  
context.fillStyle   = '#00f';  
context.strokeStyle = '#f00';  
context.lineWidth   = 4;  
   
context.beginPath();  
// Start from the top-left point.  
context.moveTo(180, 0); // give the (x,y) coordinates  
context.lineTo(280, 50);  
context.lineTo(180, 100);  
context.lineTo(180, 0);  
   
// Done! Now fill the shape, 和 draw the stroke.  
// Note: your shape will not be visible until you call any of the two methods.  
context.fill();  
context.stroke();  
context.closePath();


</script>
</body>
</html>